<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <!--  分类树形菜单  -->
                <el-tree
                    :data="data"
                    :props="defaultProps"
                    accordion
                    @node-click="handleNodeClick">
                </el-tree>
            </el-aside>
            <el-container>
                <el-header class="md-header">
                    <!-- 商品增加 开始 -->
                    <div style="text-align: left">
                        <el-button type="danger" plain @click="dialogBrand = true">增加品牌</el-button>
                        <el-button type="danger" plain @click="dialogFormVisible = true">增加商品</el-button>

                        <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="商品名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="商品描述" :label-width="formLabelWidth">
                                <el-input v-model="form.desc" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" :label-width="formLabelWidth">
                                <el-input v-model="form.price" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="商品图片" :label-width="formLabelWidth">
                                <el-upload class="upload-demo" >
                                    <el-button type="danger" plain>点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="商品详情" :label-width="formLabelWidth">
                                <mavon-editor style="min-height: 600px" />
                            </el-form-item>
                            <el-form-item label="商品分类(1)" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="手机" value="1"></el-option>
                                    <el-option label="相机" value="2"></el-option>
                                    <el-option label="电脑" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品分类(3)" :label-width="formLabelWidth">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="手机" value="4"></el-option>
                                    <el-option label="游戏手机" value="5"></el-option>
                                    <el-option label="手机壳" value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="danger" plain @click="dialogFormVisible = false">确 定</el-button>
                        </div>
                        </el-dialog>
                        <!-- 增加品牌 -->
                        <el-dialog title="增加品牌" :visible.sync="dialogBrand">
                        <el-form :model="form">
                            <el-form-item label="品牌名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off" style="width: 260px"></el-input>
                            </el-form-item>
                            <el-form-item label="品牌Logo" :label-width="formLabelWidth">
                                <el-upload class="upload-demo" >
                                    <el-button type="danger" plain>点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                            
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogBrand = false">取 消</el-button>
                            <el-button type="danger" plain @click="dialogBrand = false">确 定</el-button>
                        </div>
                        </el-dialog>
                    </div>
                    <!-- 商品增加结束 -->
                </el-header>
                <el-main>
                    <!-- 商品展示 -->
                     <el-table
                        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%">
                        <el-table-column
                        label="编号"
                        prop="code">
                        </el-table-column>
                        <el-table-column
                        label="名称"
                        prop="name">
                        </el-table-column>
                        <el-table-column
                        label="价格"
                        prop="price">
                        </el-table-column>
                        <el-table-column
                        label="规格"
                        prop="spec">
                        </el-table-column>
                        <el-table-column
                        align="right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer>
                    <!-- 分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100">
                    </el-pagination>
                </el-footer>
            </el-container>
        </el-container>
    </div>
       
</template>

<script>
import { mavonEditor } from 'mavon-editor'
// 引入编辑器样式 
import 'mavon-editor/dist/css/index.css'
export default {
    components: {
        mavonEditor
    },
    data() {
        return {
            // 分类列表
            data: [
                {
                    label: '手机',
                    children: [
                        {
                            label: '手机通讯',
                            children: [
                                {
                                    label: '手机'
                                },
                                {
                                    label: '游戏手机'
                                }
                            ]
                        },
                        {
                            label: '手机配件',
                            children: [
                                {
                                    label: '手机壳'
                                },
                                {
                                    label: '手机贴膜'
                                }
                            ]
                        },
                    ]
                },
                {
                    label: '相机',
                    children: [
                        {
                            label: '摄影摄像',
                            children: [
                                {
                                    label: '数码相机'
                                },
                                {
                                    label: '微单相机'
                                }
                            ]
                        },
                        {
                            label: '数码配件',
                            children: [
                                {
                                    label: '存储卡'
                                },
                                {
                                    label: '三角架'
                                }
                            ]
                        },
                    ]
                }, 
                {
                    label: '电脑',
                    children: [
                        {
                            label: '电脑整机',
                            children: [
                                {
                                    label: '笔记本'
                                },
                                {
                                    label: '游戏本'
                                }
                            ]
                        },
                        {
                            label: '电脑配件',
                            children: [
                                {
                                    label: '显示器'
                                },
                                {
                                    label: 'CPU'
                                }
                            ]
                        },
                    ]
                }, 
            ], 
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // 商品列表
            tableData: [
                {
                    code: '001001',
                    name: '华为P30 5G手机',
                    price: '4288.00',
                    spec: '8G 128G'
                },
                {
                    code: '001002',
                    name: '华为P40 5G手机',
                    price: '4788.00',
                    spec: '8G 128G'
                }, 
                {
                    code: '001003',
                    name: '华为Meta30 5G手机 保时捷',
                    price: '9899.00',
                    spec: '8G 256G'
                },
                {
                    code: '001004',
                    name: '华为Meta40 5G手机 保时捷',
                    price: '12899.00',
                    spec: '8G 256G'
                },
                {
                    code: '001005',
                    name: '华为Meta40 5G手机 保时捷',
                    price: '16899.00',
                    spec: '12G 512G'
                }, 
            ],
            search: '',  // 搜索
            currentPage: 1,
            // 增加品牌
            dialogBrand: false,
            // 增加商品
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        } 
    },
    methods: {
        // 树形控件
        handleNodeClick(data) {
            console.log(data);
        },
        // 表格当中的修改和删除
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
